<template>
  <div id="about">
<img src="../assets/imgs/5.jpg" alt="" style="width:100%;hight:800px">

    <header :style="{color: Color}"> 
      <Icon type="md-ribbon"></Icon>当前位置: <router-link style="cursor:pointer" tag="span" to="/">首页</router-link> >数据监控
      </header>
        <div id="container">
          <div class="card" v-for="(item, index) in talkdata" :key="index">
            <img v-lazy="item.imgsrc">  
            <p>{{item.content}}</p>
            <p>{{item.datetime}}</p>
          </div>
      </div>
      <a href="https://gjlzz.azwcl.com/">数据监控详解</a>

<div class="charts">
      <div id="barGraph" style="height: 350px;"></div>
    </div>
 
    <div class="charts">
      <div id="pieGraph" style="height: 350px;"></div>
    </div>

  </div>
</template>
<script>

let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入柱状图
  require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

import  { getnotedetail } from '../components/NetWork/request'
  export default {
    name:'about',
    data() {
      return {
        talkdata:[]
      }
    },
    computed:{
      Color() {
        return this.$store.state.Color
      }
    },
    mounted() {
      getnotedetail('/upload/gettalk')
      .then(res => {
        if(res.data.err === 0) {
            this.talkdata = res.data.data;
        } else {
          this.$Message.error(res.data.data);
        }
      })
      this.drawBar();
    this.drawPie();
    },
    methods:{
    drawBar(){
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById('barGraph'));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: '疫情防控数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          left: 'center',
          data: ['本年', '上年'],
          bottom:0
        },
        xAxis: {
          type: 'category',
          name: 'x',
          splitLine: {show: false},
          data: ['05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20', '05-21', '05-22', '05-23', '05-24', '05-25']
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          name: 'y',
          splitLine: {show: true},
          data:['100','200','300','400','500','600','700','800','900','1000']
        },
        series: [
          {
            name: '本年',
            type: 'line',
            data: [0.49, 2.0, 2.36,3.58, 2.58, 2.86, 3.17, 3.25, 7.43, 4.80, ]
          },
          {
            name: '上年',
            type: 'line',
            data: [3, 4, 5, 5, 7, 6,5, 5, 6, 7, 8, 5, ]
          },
        ]
      })
    },
    drawPie(){
      let pieGraph = echarts.init(document.getElementById('pieGraph'));
      pieGraph.setOption({
        title : {
          text: '全球新冠肺炎疫情大数据报告',
          subtext: '截至5.24',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['美国','印度','巴西','法国','中国']
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
              {value:33896660, name:'美国'},
              {value:26752447, name:'印度'},
              {value:16083258, name:'巴西'},
              {value:5980325, name:'法国'},
              {value:107195, name:'中国'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }

  }
</script>
<style lang="scss" scoped>
#about {
  width: 90%;
  margin:2rem auto;
  position: relative;
  z-index: 5;
  transition: all 1s;
  #container {
    width: 100%;
    columns: 5;
    .card {
      width: 100%;
      background: #f2f2f2;
      overflow: hidden;
      position: relative;
      border: 1px solid #ccc;
      break-inside:avoid;
      padding: 0.6rem;
    img {
      max-width: 100%;
    }
    p:nth-child(2) {
      color:orange;
    }
    p:nth-child(3) {
      text-align: right;
      color: lightgreen;
    }
    p:nth-child(3)::before {
      content:'From--';
    }
  }
  }
  @media screen and (max-width: 1500px){
      #container {
        columns:4 ;
      }
  }
    @media screen and (max-width: 1200px){
      #container {
        columns:3 ;
      }
  }
    @media screen and (max-width: 900px){
      #container {
        columns:2 ;
      }
  }
  header {
    padding-bottom: 2rem;
    position: relative;
    span:hover {
      color: lightblue;
    }
  }
}
</style>